<template>
  <view class="content">
    <view class="form">
      <view class="name">
        <view class="label bef">充值活动标题</view>
        <input type="text" v-model="data.title" placeholder="请输入活动标题" />
      </view>
      <view class="name">
        <view class="label bef">活动范围：</view>
        <wd-radio-group v-model="data.scope" shape="button" @change="onscope">
          <wd-radio :value="'ORDERS_PAY'">消费</wd-radio>
          <wd-radio :value="'RECHARGE'">充值</wd-radio>
        </wd-radio-group>
      </view>
      <view class="name">
        <view class="label bef">赠送类型：</view>
        <wd-radio-group v-model="data.type" shape="button" @change="ontype">
          <wd-radio :value="'RATIO'">百分比</wd-radio>
          <wd-radio :value="'RATION'">定量</wd-radio>
        </wd-radio-group>
      </view>
      <view class="name" v-if="data.type === 'RATIO'">
        <view class="label">赠送百分比：</view>
        <input type="digit" v-model="data.ratio" placeholder="请输入小数" />
      </view>
      <view class="name" v-if="data.type === 'RATION'">
        <view class="label">支付金额：</view>
        <input type="digit" v-model="data.payAmount" placeholder="请输入支付金额" />
      </view>
      <view class="name" v-if="data.type === 'RATION'">
        <view class="label">赠送积分：</view>
        <input type="digit" v-model="data.points" placeholder="请输入赠送积分" />
      </view>
      <view class="name">
        <view class="label">开始日期选择:</view>
        <picker mode="date" :value="data.startTime" @change="start">
          <view class="picker" v-if="data.startTime === ''">请选择</view>
          <view class="picker" v-else>
            {{ data.startTime }}
          </view>
        </picker>
      </view>
      <view class="name">
        <view class="label">结束日期选择:</view>
        <picker mode="date" :value="data.endTime" @change="end">
          <view class="picker" v-if="data.endTime === ''">请选择</view>
          <view class="picker" v-else>
            {{ data.endTime }}
          </view>
        </picker>
      </view>
      <view class="btn">
        <button @click="paypost" v-if="data.id === ''">创建充值活动</button>
        <button @click="putpost" v-else>修改充值活动</button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { err, back, toast } from '@/utils/uniapi';
import { api } from '@/api/mop_api';
const data = reactive({
  title: '',
  scope: '',
  type: '',
  ratio: '',
  payAmount: '',
  points: '',
  startTime: '',
  endTime: '',
  id: ''
});
onLoad(async (e: any) => {
  if (e.id) {
    data.id = e.id;
    try {
      const res = await api.payhdGet({ id: e.id });
      if (res.respCode === 200) {
        const item = JSON.parse(res.source);
        const { title, scope, type, ratio, payAmount, points, startTime, endTime } = item;
        data.title = title;
        data.scope = scope;
        data.type = type;
        data.ratio = ratio;
        data.payAmount = payAmount;
        data.points = points;
        data.startTime = startTime;
        data.endTime = endTime;
      } else {
        toast(res.msg);
      }
    } catch (error) {
      err(error);
      throw error;
    }
  }
});
async function paypost() {
  try {
    const { title, scope, type, ratio, payAmount, points, startTime, endTime } = data;
    const coverUrl = '';
    const datas = {
      title,
      scope,
      type,
      ratio: type === 'RATIO' ? ratio : undefined,
      payAmount: type !== 'RATIO' ? payAmount : undefined,
      points: type !== 'RATIO' ? points : undefined,
      startTime,
      endTime,
      coverUrl,
      status: 'NORMAL'
    };
    const res = await api.payhdpost(datas);
    if (res.respCode === 200) {
      toast('添加成功');
      back();
    } else {
      toast(res.msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
async function putpost() {
  try {
    const { title, scope, type, ratio, payAmount, points, startTime, endTime, id } = data;
    const coverUrl = '';
    const datas = {
      title,
      scope,
      type,
      ratio: type === 'RATIO' ? ratio : undefined,
      payAmount: type !== 'RATIO' ? payAmount : undefined,
      points: type !== 'RATIO' ? points : undefined,
      startTime,
      endTime,
      coverUrl,
      id
    };
    const res = await api.payhdput(datas);
    if (res.respCode === 200) {
      toast('修改成功');
      back();
    } else {
      toast(res.msg);
    }
  } catch (error) {
    err(error);
  }
}
function onscope(e: any) {
  data.scope = e.value;
}
function ontype(e: any) {
  data.type = e.value;
}
function start(e: any) {
  data.startTime = e.detail.value;
}
function end(e: any) {
  data.endTime = e.detail.value;
}
</script>

<style scoped>
.form {
  width: 100%;
  margin-top: 20rpx;
  box-sizing: border-box;
}
.name {
  width: 732rpx;
  height: 150rpx;
  margin: 0 auto;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  box-shadow: 0rpx 4rpx 10rpx rgba(10, 14, 20, 0.05);
  padding-top: 10rpx;
  padding-left: 40rpx;
  box-sizing: border-box;
}
.label {
  font-size: 28rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #111827;
}
input {
  width: 662rpx;
  height: 52rpx;
  margin-top: 22rpx;
  border-radius: 10rpx;
  border: 1rpx solid #00000033;
  padding-left: 20rpx;
  border-radius: 20rpx;
}
.radio {
  float: left;
  margin-top: 16rpx;
}
.pl {
  line-height: 60rpx;
}
button {
  width: 716rpx;
  height: 68rpx;
  background: #e30514;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  padding: 0;
  color: #fff;
  line-height: 68rpx;
}
picker {
  float: left;
  width: 462rpx;
  height: 52rpx;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  opacity: 1;
  border: 2rpx solid #e5e7eb;
  padding-left: 20rpx;
  border-radius: 20rpx;
  line-height: 52rpx;
}
</style>
